<template>
    <view>
        <view class="container-with-bg">
            <image src="../../static/my/my_header.png" class="bg-img"></image>
            <view class="fg-content nova-column nova-flex-center">
                <image :src="info.headimg || '/static/logo.png'"></image>
                <text class="name">{{ info.name }}</text>
            </view>
        </view>
        <view class="card nova-column card1">
            <text class="title">个人信息</text>
            <view class="li nova-row-center" v-for="(item, index) in items1" :key="index" :class="{ last: index == item.length - 1 }">
                <text class="label">{{ item.label }}</text>
                <text class="value">{{ item.value }}</text>
            </view>
        </view>

        <view class="card nova-column card2">
            <text class="title">{{ getTypeName() }}</text>
            <view class="li nova-row-center" v-for="(item, index) in items2" :key="index">
                <text class="label">{{ item.label }}</text>
                <text class="value">{{ item.value }}</text>
            </view>
        </view>
        <view class="button-bar fixed-bottom">
            <button id="share" open-type="share" v-show="false"></button>
            <label for="share" class="btn">分享</label>
            <view class="btn" @tap="makecall()">
                <image class="small-icon" src="../../static/img/call.png" />
                拨打
            </view>
        </view>
    </view>
</template>

<script>
import conf from '../../common/conf.js';
export default {
    data() {
        return {
            publish_share_id: '',
            info: {},
            items1: [],
            items2: []
        };
    },
    methods: {
        async loadData() {
            let res = await this.$request.post({
                url: '/publish/publishNurseDetails',
                data: {
                    publish_share_id: this.publish_share_id
                }
            });
            let d = res.nurseDetail;
            let item1 = [];
            item1.push({
                label: '阿姨姓名：',
                value: d.userName
            });
            item1.push({
                label: '阿姨性别：',
                value: d.sex
            });
            item1.push({
                label: '出生日期：',
                value: d.birthday
            });
            item1.push({
                label: '籍贯：',
                value: d.place
            });
            item1.push({
                label: '手机号码：',
                value: d.userPhone
            });
            // item1.push({
            //     label: '空余时间：',
            //     value: ''
            // });
            item1.push({
                label: '家庭地址：',
                value: d.village
            });
            this.items1 = item1;
            let item2 = [];
            d = res.mineDetail;
            d.forEach(item => {
                let l = item.split(':');
                // if (l[0].indexOf('备注') < 0) 
                {
                    item2.push({
                        label: l[0] + '：',
                        value: l[1]
                    });
                }
            });
            this.items2 = item2;
            this.info = res;
        },
        getTypeName() {
            if (this.info) {
                let detail = this.info.nurseDetail;
                if (detail && detail.type > 0 && detail.type < conf.ayTypes.length) {
                    return conf.ayTypes[detail.type];
                }
            }
            return '';
        },
        makecall() {
            let tel = '';
            tel = this.info.nurseDetail.userPhone;
            if (tel) {
                uni.makePhoneCall({
                    phoneNumber: tel
                });
            }
        }
    },
    onLoad(options) {
        console.log('onLoad', options);
        this.publish_share_id = options.id;
        if (!this.publish_share_id) {
            // #ifdef H5
            this.publish_share_id = '0fe5e2d4ff694fe7b25d1830e0a4dc3d';
            // #endif
        }
        this.loadData();
    },
    onShareAppMessage() {
        return {
            path: '/pages/yz/yz-share-detail?id=' + this.publish_share_id
        };
    }
};
</script>

<style lang="scss">
page {
    background-color: #fcfcfc;
    margin-bottom: 100rpx;
}
.container-with-bg {
    position: relative;
    width: 100%;
    height: 344rpx;
    .bg-img {
        width: 100%;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 0;
        height: 344rpx;
        background: $uni-color-primary;
    }
    .fg-content {
        position: absolute;
        z-index: 10;
        left: 0;
        top: 0;
        width: 100%;
        display: flex;
        image {
            width: 128rpx;
            height: 128rpx;
            border-radius: 10rpx;
            background-color: #f2f2f2;
            margin-top: 50rpx;
        }
        .name {
            font-size: 40rpx;
            color: white;
            margin-top: 20rpx;
        }
    }
}
.sep {
    height: 125rpx;
}
.card {
    position: relative;
    background-color: white;
    box-shadow: 0 0 2rpx #f1f1f1;
    top: -60rpx;
    left: 0;
    border-radius: 8rpx;
    margin-left: 34rpx;
    margin-right: 34rpx;
    display: flex;
    align-items: flex-start;
    padding: 0 34rpx;
    .title {
        color: #333333;
        font-size: 32rpx;
        line-height: 80rpx;
        height: 80rpx;
    }
    .li {
        flex: 1;
        width: 100%;
        position: relative;
        color: #999999;
        border-top: 1rpx solid #ccc;
        .label {
            font-size: 28rpx;
            padding: 30rpx 0;
        }
        .value {
        }
    }
    // .li-last {
    //     &:after {
    //         display: none;
    //     }
    // }
}
.card2 {
    top: 0;
    .li {
        .label {
            color: #000000;
        }
    }
}

.fixed-bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    background: #ffffff;
    border-top: 1rpx solid #e5e5e5;
    box-sizing: border-box;
    height: 100rpx;
    line-height: 100rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 20rpx;
    padding-right: 20rpx;
    .btn {
        flex: 1;
        background-color: $uni-color-primary;
        height: 70rpx;
        display: inline-flex;
        align-items: center;
        border-radius: 12rpx;
        color: white;
        margin-left: 20rpx;
        margin-right: 20rpx;
        justify-content: center;
        image {
            width: 14px;
            height: 14px;
            margin-right: 10px;
        }
    }
    .btn-invert {
        color: $uni-color-primary;
        border: 1rpx solid $uni-color-primary;
        background: none;
    }
}
</style>
